<template>
  <div>
    <el-row class="special-price" type="flex">
      <div class="free-price">{{ row.bargained_total_price | moneySymbol }}</div>
      <div>/</div>
      <div class="price">{{ totalPrice | moneySymbol }}</div>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      default: _ => {
        return {};
      }
    }
  },
  computed: {
    totalPrice() {
      const bargained = parseFloat(this.row.bargained_total_price);
      const remain = parseFloat(this.row.remain_price);
      return bargained + remain;
    }
  }
};
</script>
<style lang="scss" scoped>
.special-price {
  .price {
    color: $price-color;
  }
  .free-price {
    color: $free-price-color;
  }
}
</style>
